<template>
  <div class="setting-content inside-comment">
    <el-scrollbar height="calc(100vh - 170px)">
      <div class="layout">
        <div class="list-back" @click="listBack"><el-icon><DArrowLeft /></el-icon>返回列表</div>
        <div class="top-name">
          网友留言
        </div>
        <div class="top-info">
          <div class="user-info">
            <div class="left-name">
              <span>留言人：</span>{{commentData?.userName}}
            </div>
            <div class="right-time">
              <div class="time">{{ dayjs(commentData?.publishTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
              <div class="isReply">
                <el-tag v-if="commentData?.isReply" type="success">已回复</el-tag>
                <el-tag v-else type="warning">待回复</el-tag>
              </div>
            </div>
          </div>
          <el-divider class="divider-line"/>
          <div class="comment-name"><span class="classify" v-if="commentData?.typeName">[{{commentData?.typeName}}]</span>{{ commentData?.content?.content[0]?.value }}</div>
        </div>
        <div class="comment-box">
          <div class="comment" v-html="commentData?.content?.content[1]?.value"></div>
        </div>
        <div class="replay-box" v-if="commentData.children && commentData.children.length > 0">
          <div class="top-name">
            官方回复
          </div>
          <div class="replay-item" v-for="item in commentData.children" :key="item.id">
            <div class="top-replay">
              <div class="left-box">回复人：{{ item.userName }}</div>
              <div class="right-time">回复时间：{{ dayjs(item.publishTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
            </div>
            <el-divider class="divider-line"/>
            <div class="bottom-replay">
              <div class="replay-content" v-html="item.content.content"></div>
            </div>
          </div>
        </div>
        <div class="evaluate-box" v-if="commentData.children && commentData.children.length > 0">
          <p class="evatips">请留言作者对官方回复进行评价 <span @click="showEvaluate">[点击进行评价]</span></p>
          <p class="tips">注：回复后10天内网友未评价，将默认网友对该回复“满意”。</p>
        </div>
        <!-- 其他用户回复 评论区 -->
        <Review :commentId="commentData?.id" v-if="commentSetting?.allowRemark && commentData.id"></Review>
        <!-- 提交评价对话框 -->
        <el-dialog v-model="evaluateVisible" title="回复评价" width="800px">
          <el-form :model="evaluateForm" :rules="evaluateRules" label-width="70px">
            <el-form-item label="满意度" class="radio">
              <el-radio-group v-model="evaluateForm.isSatisfied">
                <el-radio :label="true" size="large">满意</el-radio>
                <el-radio :label="false" size="large">不满意</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="评价内容" >
              <el-input v-model="evaluateForm.content"  
              :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入" rows="4" size="large"/>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="evaluateVisible = false">取消</el-button>
              <el-button type="primary" @click="handleEvaluateSubmit">确认</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { 
  selectReplyTreeByFront,
 } from "@/api/comment"; 
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { insertCommentEvaluations, selectByCommentIdEvaluations } from "@/api/evaluate";
import Review from "../components/Review.vue";
import { DArrowLeft } from '@element-plus/icons-vue';
import { selectfunction } from "@/api/setting"; 

const router = useRouter(); 
const route = useRoute(); 
const store = useStore();
const commentData = ref({}); 
const evaluateForm = ref({
  commentId: 0,
  content: "",
  isSatisfied: true,
  userId: store.state.base.userInfo.id,
})

//获取留言设置
const commentSetting = ref()
const getCommentSetting = async () => {
  const res = await selectfunction()
  commentSetting.value = res.data 
}
getCommentSetting()

//评价回复弹窗
const evaluateVisible = ref(false)
const showEvaluate = async () => {
  //判断是否本人评价，及只允许评价一次
  if(evaluateForm.value.userId !== commentData.value.userId){
    ElMessage.error("仅允许本人评价");
    return;
  }

  const evalusteNum = await selectByCommentIdEvaluations({commentId:commentData.value.id})
  console.log("evalusteNum",evalusteNum);
  
  if(evalusteNum.data){
    ElMessage.error("您已经评价过了");
    return;
  }
  evaluateVisible.value = true;
}
//根据留言id获取回复
const getComment = async () => {
  const id = route.query.id; 
  const res = await selectReplyTreeByFront({commentId:id}); 
  if(res.code === 20000){
    commentData.value = res.data[0];
    console.log("commentData.value",commentData.value);
    evaluateForm.value.commentId = res.data[0].id;
  }
}

//提交评价
const handleEvaluateSubmit = async () => {
  
  try {
    const res = await insertCommentEvaluations(evaluateForm.value); 
    if (res.code === 20000) {
      ElMessage.success("提交评价成功");
      evaluateVisible.value = false;
    }
  } catch (error) {
    ElMessage.error("提交评价失败");
  }
}

const listBack = () => {
  router.push({ 
    path: '/comment/user/commentList', 
  });
}

onMounted(() => {
  getComment();
});
</script>

<style scoped lang='scss'>
.setting-content{
  margin: 60px auto 0;
  max-height: calc(100vh - 150px);
  /* overflow-y: scroll; */
}
.list-back{
  color: $black_2;
  font-size: 14px;
  line-height: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  i{
    margin-right: 3px;
  }
  &:hover{
    color: $black;
  }
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.top-info{
  box-sizing: border-box;
  padding: $padding-medium;
  font-size:18px;
  margin-bottom: 15px;
  box-shadow: 0 0 5px #eee;
  background:#f2f2f2;
  margin-top: 15px;
  border-radius: 4px;
  .user-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    .left-name{
      font-size: 18px;
      color: $black_2;

    }
    .right-time{
      display: flex;
      align-items: center;
      color: $black_2;
      font-size: 16px;
      /* margin-top:10px; */
      .isReply{
        margin-left: 10px;
      }
    }
  }
  .comment-name{
    /* max-width: calc(100% - 60px); */
    line-height: 1.5;
    .classify{
      color: $mainColor;
      margin-right: 10px;
    }
  }
  
}
.divider-line{
  margin-bottom: 15px;
}
.comment-box{
  margin-top: 20px;
  .comment{
    font-size: 18px;
    line-height: 2;
    color: #333;
    ::v-deep *{
      max-width: 100%;
      font-size: 16px !important;
    }
  }
}
.top-name{
    font-size: 24px;
    color: $mainColor;
    margin-top:10px;
}
.replay-box{
  margin-top: 40px;
  
  .replay-item {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    .top-replay {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      .left-box{
        font-size: 18px;
        color: $black_2;
      }
      .right-time{
        font-size: 16px;
        color: $black_2;
      }
    }
    .bottom-replay {
      margin-top: 10px;
      font-size: 18px;
      line-height: 2;
      color: $black;
    }
  }
}
.evaluate-box{
  margin: 20px 0;
  .evatips{
    padding: 10px;
    background: #ebebeb;
    color: $subColor;
    font-size: 16px;
    border-radius: 4px;
    span{
      color: $black;
      cursor: pointer;
      &:hover{
        color:#1862c2;
      }
    }
  }
  .tips{
    margin-top: 10px;
    color: $subColor;
    font-size: 14px;
  }
}
.el-radio{
  margin-right: 20px;
}
.radio{
  align-items: center;
}
/* 响应式 */
@media (max-width: 960px) {
  .top-name{
    font-size: 18px;
    margin-top:10px;
  }
  .top-info{
    padding: 15px;
   .user-info{
      display: block;
      .right-time{
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
      }
    }
  }
  .divider-line{
    margin-bottom: 10px;
  }
  .el-divider--horizontal{
    margin-bottom: 10px;
  }
  .comment-box .comment * {
    font-size: 14px !important;
    line-height: 1.5;
  }
}
</style>
